<style lang="less">
@import "../../styles/common.less";
@import "./add.less";
.detail-item {
  width: 33.333%;
  padding: 8px 12px 8px 0;
  @media screen and (max-width: 768px) {
    width: 100%;
    border-bottom: 1px dotted #eee;
  }
}
.check-row {
  padding: 8px 12px;
  .test-title {
    display: flex;
    width: 100%;
    justify-content: space-between;
  }
  .test-name {
    line-height: 32px;
    i {
      vertical-align: middle;
    }
  }
  .test-details {
    padding: 4px 24px 0;
    span {
      line-height: 1.7;
    }
    span:first-child {
      margin-right: 8px;
    }
  }
}
.loading {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.wiki-item {
  border-bottom: 1px dashed #ddd;
  padding: 12px;
  i {
    vertical-align: middle;
  }
}
.wiki-item:last-of-type {
  border-bottom: none;
}
</style>

<template>
    <div>
        <Row>
            <Card>
              <div slot="title">
                <h4><Icon type="clipboard" style="margin-right:12px"></Icon>故障检测报告（数据均为报障时）</h4>
                <Tooltip content="运行测试" style="position: absolute; right: 40px; top: 5px;">
                    <Button type="text" @click="startTest"><Icon type="ios-play" :size="20"></Icon> </Button>
                </Tooltip>
                <Tooltip content="下载报告" style="position: absolute; right: 12px; top: 4px;">
                    <Button type="text" @click="exportData(1)"><Icon type="ios-download" :size="20"></Icon> </Button>
                </Tooltip>
              </div>
              <div>
                <div style="padding: 0 12px 12px; display: flex; justify-content: flex-start; flex-wrap: wrap; border-bottom: 1px solid #ddd;">
                  <div class="detail-item"><strong>报告创建时间: </strong>2018-01-15 15:58:19</div>
                  <div class="detail-item"><strong>最近更改时间: </strong>2018-01-15 15:58:19</div>
                  <div class="detail-item"><strong>最近更改人: </strong>测试管理员</div>
                  <div class="detail-item"><strong>相关控制器: </strong><a href='#/AC-detail/SLR01-WiFi-08a'>SLR01-WiFi-08a</a></div>
                  <div class="detail-item"><strong>相关AP: </strong><a href='#/AP-detail/70:3a:0e:cb:6b:9c'>70:3a:0e:cb:6b:9c</a></div>
                  <div class="detail-item"><strong>相关终端: </strong><a href='#/client-detail/C0:33:5E:11:86:E9'>C0:33:5E:11:86:E9</a></div>
                  <div class="detail-item"><strong>控制器健康度: </strong>41</div>
                  <div class="detail-item"><strong>控制器带宽: </strong>193.39 Kbps</div>
                  <div class="detail-item"><strong>控制器下终端数: </strong>123</div>
                  <div class="detail-item"><strong>AP健康度: </strong>23</div>
                  <div class="detail-item"><strong>AP带宽: </strong>31.88 Kbps</div>
                  <div class="detail-item"><strong>AP下终端数: </strong>123</div>
                  <div class="detail-item"><strong>终端SNR: </strong>71dB</div>
                  <div class="detail-item"><strong>终端连接模式: </strong>802.11ac</div>
                  <div class="detail-item"><strong>终端类型: </strong>iPad</div>
                  <div class="detail-item"><strong>终端用户名: </strong>127312141</div>
                </div>
                <div style="padding: 12px 0;">
                  <div v-for="item,index in testList" class="check-row">
                    <div class="test-title">
                      <span class="test-name"><strong>{{item.name}}</strong>
                        <Icon v-show="computeTested(item.details) && computeStatus(item.details)" type="checkmark-circled" color="#20CB9A" :size="20" style="margin-left: 12px;"></Icon>
                        <Icon v-show="computeTested(item.details) && !computeStatus(item.details)" type="close-circled" color="red" :size="20" style="margin-left: 12px;"></Icon>
                        <Icon v-show="computeTesting(item.details)" type="load-c" color="#348EED" :size="20" style="margin-left: 12px;" class="loading"></Icon>
                      </span>
                      <span>
                        <Tag v-show="!computeTested(item.details)" style="margin-left: 4px;">未分析</Tag>
                        <Button  v-show="computeTested(item.details)" @click="" style="margin-left: 12px;" type="primary">重新检测</Button>
                      </span>
                    </div>
                    <div class="test-details">
                      <div v-for="jtem in item.details" v-show="jtem.good!==undefined || jtem.testing">
                        <span>{{jtem.name}}: </span>
                        <span v-show="!jtem.testing" :style="{color: jtem.good===undefined?'#444':(jtem.good?'green':'red')}">{{jtem.desc}}</span>
                        <Poptip  v-show="!jtem.testing" trigger="hover" content="正常标准：>50"  placement="top-end">
                          <Button style="transform: scale(0.7) translateY(-2px);" type="ghost" size="small" shape="circle" icon="information"></Button>
                        </Poptip>
                        <Icon v-show="jtem.testing" type="load-c" color="#348EED" :size="20" style="margin-left: 12px;" class="loading"></Icon>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div style="padding: 4px 0; border-top: 1px solid #ddd; min-height: 120px">
                <div v-show="wikiList.length===0" style="line-height: 120px; text-align: center; font-size: 16px">
                  知识库暂无相关条目
                </div>
                <div v-for="item in wikiList" class="wiki-item">
                  <div>
                    <strong>{{item.title}}</strong><span> (ID:{{item.id}})</span>
                    <Icon style="margin-left: 4px; cursor: pointer" :type="item.like?'star':'ios-star-outline'" :color="item.like?'gold':'grey'" :size="20"></Icon>
                  </div>
                  <div>{{item.desc}}</div>
                </div>
                <div class="wiki-item">
                  未找到有帮助信息，<a href="#/wiki/wiki-search">手动搜索知识库</a>
                </div>
              </div>
              <div style="display: flex; padding: 16px 0 0; border-top: 1px solid #ddd;">
                <div style="margin: auto;">
                  <Button @click="startTest" style="width: 100px" type="primary">检测</Button>
                  <Button v-show="!solveStarted" @click="startSolve" style="width: 100px; margin-left: 12px;" type="success">开始解决</Button>
                  <Button v-show="solveStarted" @click="finishSolve" style="width: 100px; margin-left: 12px;" type="success">确认解决</Button>
                  <Button v-show="solveStarted" @click="stopSolve" style="width: 100px; margin-left: 12px;" type="warning">转为问题</Button>
                </div>
              </div>
            </Card>
        </Row>
    </div>
</template>

<script>
export default {
  name: "workflow",
  data() {
    return {
      solveStarted: false,
      eventForm: {
        owner: "",
        controller: "",
        AP: "",
        client: "",
        priority: "",
        eventType: 0
      },
      eventTypes: [
        {
          value: "1",
          label: "无法连接"
        }
      ],
      owners: [
        {
          value: "1",
          label: "测试管理员"
        }
      ],
      ACs: [
        {
          value: "1",
          label: "测试AC"
        }
      ],
      APs: [
        {
          value: "1",
          label: "测试AP"
        }
      ],
      clients: [
        {
          value: "1",
          label: "测试终端"
        }
      ],
      stepList: [],
      eventTitle: {
        title: "",
        describe: "",
        content: ""
      },
      formRules: {
        eventType: [
          { required: true, message: "请选择类型", trigger: "change" }
        ],
        desc: [{ required: true, message: "请填写故障描述", trigger: "blur" }],
        priority: [
          { required: true, message: "请选择优先级", trigger: "change" }
        ]
      },
      editMode: false,
      currentStep: 0,
      status: "wait",
      testList: [
        {
          name: "RF分析",
          tested: false,
          opened: true,
          details: [
            { name: "关联状态检测", good: undefined, desc: "", testing: false },
            { name: "工作频段检测", good: undefined, desc: "", testing: false },
            { name: "信道忙闲检测", good: undefined, desc: "", testing: false },
            { name: "信号质量检测", good: undefined, desc: "", testing: false }
          ]
        },
        {
          name: "认证分析",
          tested: false,
          opened: true,
          details: [
            {
              name: "认证记录查询",
              good: undefined,
              desc: "",
              testing: false
            },
            {
              name: "用户权限查询",
              good: undefined,
              desc: "",
              testing: false
            }
          ]
        },
        {
          name: "DHCP分析",
          tested: false,
          opened: true,
          details: [
            {
              name: "DHCP 记录查询",
              good: undefined,
              desc: "",
              testing: false
            },
            {
              name: "DHCP 服务器工作状态",
              good: undefined,
              desc: "",
              testing: false
            }
          ]
        },
        {
          name: "DNS分析",
          tested: false,
          opened: true,
          details: [
            { name: "DNS 服务器工作状态", good: undefined, desc: "", testing: false },
          ]
        },
        {
          name: "Routing分析",
          tested: false,
          opened: true,
          details: [
            {
              name: "ARP表中mac地址对应检测",
              good: undefined,
              desc: "",
              testing: false
            }
          ]
        }
      ],
      wikiList: [
        { id: 1211, title: "知识库测试12", desc: "测试测试", like: true },
        { id: 1221, title: "知识库测试13", desc: "测试测试", like: false }
      ]
    };
  },
  methods: {
    computeTesting(details) {
      for (let item of details) {
        if (item.testing) return true;
      }
      return false;
    },
    computeStatus(details) {
      for (let item of details) {
        if (!item.good) return false;
      }
      return true;
    },
    computeTested(details) {
      for (let item of details) {
        if (item.good === undefined) return false;
      }
      return true;
    },
    startTest() {
      let k = 0;
      for (let i = 0; i < 5; i++) {
        for (let j = 0; j < 4; j++) {
          if (this.testList[i].details[j]===undefined) continue
          setTimeout(() => {
            this.testList[i].details[j].testing = true;
          }, k * 5000);
          setTimeout(() => {
            this.testList[i].details[j].testing = false;
            this.testList[i].details[j].good = !(i===0&&j===3);
            this.testList[i].details[j].desc = {
              '0-0': '终端在线，正常',
              '0-1': '5GHz 频段，信道 149，正常',
              '0-2': '信道占用率 38%，正常',
              '0-3': '信号强度-74dBm，信噪比 18dB，偏低',
            }[`${i}-${j}`] || "正常";
          }, (k + 1) * 5000);
          k = k + 1;
        }
      }
    },
    handleEdit() {
      if (this.editMode) {
        this.$refs["step"].validate(valid => {
          if (valid) {
            this.editMode = false;
            this.$Message.success("保存成功！");
          }
        });
      } else {
        this.editMode = true;
      }
    },
    startSolve() {
      this.$Modal.confirm({
        title: "开始解决",
        content: "<p>开始解决此故障？</p>",
        onOk: () => {
          this.$Message.success("已开始解决故障");
          this.stepList[2].describe = '李四';
          this.solveStarted = true;
          this.currentStep = 2;
        }
      });
    },
    finishSolve() {
      this.$Modal.confirm({
        title: "确认解决",
        content: "<p>确认已解决此故障？</p>",
        onOk: () => {
          this.$Message.success("已解决故障");
          this.stepList[3].describe = '李四';
          this.currentStep = 3;
        }
      });
    },
    stopSolve() {
      this.$Modal.confirm({
        title: "确认转为问题？",
        content: "<p>确认将此故障转为问题？</p>",
        onOk: () => {
          this.$Message.warning("已转为问题");
          this.stepList[3].describe = '李四';
          this.currentStep = 3;
        }
      });
    }
  },
  mounted() {
    this.stepList = [
      {
        title: "报告故障",
        describe: "张三提交"
      },
      {
        title: "检测故障",
        describe: "李四"
      },
      {
        title: "解决故障",
        describe: ""
      },
      {
        title: "确认解决/转为问题",
        describe: ""
      }
    ];
    this.eventTitle = {
      title: "网络性能故障（编号89757）",
      describe: "报告人：张三",
      created_time: "创建于：2018-01-12 07:59:13"
    };
    this.currentStep = 1;
  }
};
</script>
